<template>
  <div class="picbookMode">
    <div class="back" @touchend="indexTouch" v-if="!variable.isMp"></div>
    <div class="assignmentBg" v-if="assignmentIsShow && isVipActive && picbookIndex.firstSwiper"></div>
    <div class="assignment" @touchend.stop="assignmentTouch" v-if="assignmentIsShow && isVipActive"
    :class="isVipActive && picbookIndex.firstSwiper ? 'assignmentVipPoint' : ''">
<!--      手指提示-->
      <Point v-if="assignmentIsShow && isVipActive && picbookIndex.firstSwiper" class="pointScale"/>
    </div>
    <component v-bind:is="picbookMode[picbookType]" @popupShowTouch="popupShowTouch" @assignmentTouch="assignmentTouch">
    </component>
    <!-- <Pack /> -->
    <!--    评分-->
    <!--    弹窗-->
    <PopupShow v-if="popupShow" @scoreShow="scoreShow" @rebackTouch="rebackTouch" />
  </div>

</template>

<script>
import general from "./general/picbook.vue"
import blueFox from "./blueFox/picbook.vue"
import dialogueExplore from "./dialogueExplore/picbook.vue"
import poem from "./poem/picbook.vue"
import Pack from "../pack/pack.vue"
import Score from "./score.vue"
import PopupShow from "./popupShow.vue"
import Recommend from "./recommend.vue"
import Point from "../assignment/point.vue"
import { mapGetters, mapActions } from "vuex"
export default {
  data() {
    return {
      popupShow: false,
      picbookMode: {
        general: 'general',
        dialogueExplore: 'dialogueExplore',
        blueFox: 'blueFox',
        poem: 'poem'
      }
    }
  },
  components: {
    general,
    blueFox,
    dialogueExplore,
    poem,
    Pack,
    Score,
    PopupShow,
    Recommend,
    Point
  },
  computed: {
    assignmentIsShow() {
      const assignmentPage = this.assignment[this.questionIndex]
      return assignmentPage ? assignmentPage.filter(item => { return !item.isFinish }).length > 0 ? true : false : false
    },
    isVipActive(){
      return this.picbookIndex.vipFreeType !== 1 || this.userVipList[1].isActive || this.userVipList[2].isActive
    },
    ...mapGetters("contentStatus", {
      picbookType: "getPicbookType",
      contentIndex: "getContentIndex",
      contentItem: "getContentItem",
      questionIndex: "getQuestionIndex"
    }),
    ...mapGetters("assignmentStatus", {
      assignment: "getAssignment"
    }),
    ...mapGetters("seedActivityStatus", {
      isSeedEntery: "getIsSeedEntery"
    }),
    ...mapGetters("picbookListStatus", {
      picbookIndex: "getPicbookIndex",
      vipPicbookList: "getVipPicbookList",
    }),
    ...mapGetters("personalStatus",{
      userVip: "getUserVip",
      userVipList: "getUserVipList"
    }),
  },
  methods: {
    //回到绘本列表
    indexTouch: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$route.query.beforeRouter ? this.$router.replace({ path: "/" + this.$route.query.beforeRouter }) : this.$router.replace({ path: "/recommendList" })
        }
      })
    },
    //进入做题模块
    assignmentTouch: function () {
      this.$set(this.picbookIndex,'firstSwiper',false)
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.replace({ path: "/assignment", query: { index: this.contentIndex, beforeRouter: this.$route.query.beforeRouter } })
        }
      })
      this.assignment[this.questionIndex].forEach(item => {
        this.$set(item, 'isFinish', false)
      })
      //打乱绘本顺序
      if (!this.isSeedEntery) {
        const pageAssignment = this.assignment[this.questionIndex].sort(() => { return 0.5 - Math.random()})
        this.setPageAssignment({ questionIndex: this.questionIndex, param: pageAssignment })
      }
    },
    popupShowTouch: function () {
      this.popupShow = true
    },
    //隐藏弹窗
    rebackTouch: function () {
      this.touchMusic()
      this.popupShow = false
    },
    //显示评分
    scoreShow: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/score", query: { beforeRouter: this.$route.query.beforeRouter } })
        }
      })
    },
    ...mapActions("mainStatus", ["setLoading"]),
    ...mapActions("assignmentStatus", ["setPageAssignment", "deleteAssignment"]),
  }
};
</script>

<style scoped lang='stylus'>
@import '../../../src/common/stylus/base.styl'
@keyframes pointScale
  0%
    transform scale(1) rotate(45deg)
  25%
    transform scale(1.3) rotate(45deg)
  50%
    transform scale(1) rotate(45deg)
  75%
    transform scale(1.3) rotate(45deg)
  100%
    transform scale(1) rotate(45deg)
.picbookMode
  position absolute
  width 100%
  height 100%
  z-index 98
  .back
    z-index 99
    background url($urlTitle + 'icon/icon-返回.png') 0 0 / 100% 100%
    transform translate(calc(0px - var(--X)), calc(0px - var(--Y)))
    $coord('WHLT', 3.25rem, 3.1rem, 2rem, 1rem)
  .assignmentBg
    z-index 99
    position absolute
    width 100%
    height 100%
    background rgba(0, 0, 0, 0.5)
    color rgb(250, 250, 250)
    pacity 0
    animation fadeIn 1s
    animation-fill-mode forwards
  .assignment
    background url($urlTitle + 'icon/icon-学习.png') 0 0 / 100% 100%
    $coord('WHRT', 3.25rem, 3.1rem, 2.2rem, 1rem)
    transform translate(var(--X), calc(0px - var(--Y)))
    z-index 99
    .pointScale
      max-width 50%
      max-height 50%
      margin-left -40%
      margin-top 20%
      filter none !important
      transform scale(1) rotate(45deg)
      animation pointScale 1.8s ease
      animation-fill-mode forwards
  .assignmentVipPoint
    filter drop-shadow(1px -1px 0.5rem rgb(254, 172, 81)) drop-shadow(-1px 1px 0.5rem rgb(254, 172, 81))
  .score-bg
    position fixed
    width 100%
    height 100%
    top 0
    left 0
    background url($urlTitle + 'assignment/image/breakthrough/半透明背景60.png') 0 0 / 100% 100%
    z-index 9999
    color rgb(250, 250, 250)
    opacity 0
    animation loading-in 1s
    animation-fill-mode forwards
</style>
